import React from 'react';
import ReactECharts from 'echarts-for-react';

export default function BenefitSummary({ data, style }) {
  const option = {
    title: { text: '当月收益汇总', left: 'center', top: 10, textStyle: { color: '#00eaff', fontSize: 18, fontWeight: 700 } },
    tooltip: { trigger: 'axis' },
    legend: { data: Object.keys(data.y), top: 40, textStyle: { color: '#fff' } },
    grid: { left: 30, right: 20, top: 70, bottom: 30 },
    xAxis: {
      type: 'category',
      data: data.x,
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#fff' }
    },
    series: Object.keys(data.y).map(key => ({
      name: key,
      type: 'line',
      data: data.y[key],
      smooth: true
    }))
  };

  return (
    <div style={{ width: '100%', height: 180, ...style }}>
      <ReactECharts option={option} style={{ width: '100%', height: 180 }} />
    </div>
  );
} 